<template>
  <div class="tab_content_warp">
    <p class="tab_type">
      <img
        src="../tipsIcon.png"
        alt=""
      />
    </p>
    <div class="tab_content">
      <template
        v-for="(item, index) in arr"
        :key="index"
      >
        <div
          class="tab_content_item"
          @mouseenter="handleMouseEnter(item as IFeature)"
          @mouseleave="handleMouseLeave"
        >
          <div class="projectSet_checkBox g-one-line">
            <span
              class="checkbox_label g-one-line"
              :class="{ projectSet_title: item.type === 'title' }"
            >
              {{ $t(item.label) }}
            </span>
            <el-checkbox
              v-if="item.code"
              v-model="simulationConfigOpreation[item.code as string]"
              size="large"
              @change="handleSimulateChange"
            />
          </div>
        </div>
      </template>
      <div
        class="tips_bottom g-flex"
        style="align-items: center"
      >
        <div class="projectSet_title g-m-r-3">{{ $t(selectedItem.label) }}</div>
        <div>{{ $t(selectedItem.desc) }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { projectService } from "@/modules/model/service";
import { SimulationConfigOpreation } from "@/modules/system/SimulationConfig";
import { ref, watch, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ProjectSetParams } from "..";

const arr = [
  {
    label: "仿真框架",
    type: "title"
  },
  {
    label: "静默运行",
    code: "silent",
    desc: "若选中此项，则不会运行动画，由于动画带来的延时也会去除。"
  },
  {
    label: "自动启动",
    code: "autoStart",
    desc: "若选中此项，则在初始化后，自动运行仿真。"
  },
  {
    label: "自动启动所有对象",
    code: "autostartActiveObjects",
    desc: "若选中此项，则在对象创建完成后，立即异步地启动对象的所有活动分类器的行为。"
  },
  {
    label: "fUML引擎",
    type: "title"
  },
  {
    label: "使用fUML判断规则",
    code: "fumlDecision",
    desc: "若选中此项，则在需要进行选择的行为时（例如活动图中的判断节点），使用fUML规范语义，即进行值匹配来判断，而不是对边进行布尔判断。"
  }
];

interface IFeature {
  label: string;
  code: string;
  desc?: string;
}

const emit = defineEmits<{
  (event: "simulateChange", data: SimulationConfigOpreation): void;
}>();

const selectedItem = reactive({ label: "", desc: "" });
const route = useRoute();
const routeQuery = route.query as unknown;
let query = routeQuery as ProjectSetParams;
const simulationConfigOpreation = ref<SimulationConfigOpreation>(new SimulationConfigOpreation());
onMounted(async () => {
  await loadData();
});

async function loadData() {
  simulationConfigOpreation.value = await projectService.getSimulationConfig(query.projectId);
  emit("simulateChange", simulationConfigOpreation.value);
}
watch(
  () => route.fullPath,
  async () => {
    const newRouteQuery = route.query as any;
    query = newRouteQuery;
  },
  { immediate: true }
);

function handleMouseEnter(item: IFeature) {
  if (item.desc) {
    const { label, desc } = item;
    selectedItem.label = label + ":";
    selectedItem.desc = desc;
  }
}

function handleMouseLeave() {
  selectedItem.label = "";
  selectedItem.desc = "";
}

function handleSimulateChange() {
  emit("simulateChange", simulationConfigOpreation.value);
}
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
</style>
